<template>
  <footer class="footer">
    <span class="todo-count">
      <strong>{{uncheckedLen}}</strong>
      <span>条未选中</span>
    </span>
    <ul class="filters">
      <li><a href="#/all" :class="{'selected': getHash == 'all'}">All</a></li>
      <li><a href="#/active" :class="{'selected': getHash == 'active'}">Active</a></li>
      <li><a href="#/completed" :class="{'selected': getHash == 'completed'}">Completed</a></li>
    </ul>
  </footer>
</template>
<script>
  export default {
    name:'Footer',
    computed:{
      uncheckedLen (){
        return this.$store.state.list.filter(item => !item.checked).length;
      },
      getHash (){
        return this.$store.state.hash;
      }
    }
  }
</script>
